$black-color:#030303;
$font: "Helvetica Neue",
Helvetica,
Arial,
"PingFangSC-Regular",
"Microsoft Yahei",
"Hiragino Sans GB",
"Heiti SC",
"WenQuanYi Micro Hei",
sans-serif;
$white-color:#FFF;
$grey-color:#8C9095;
$prmary-color:#00A874;
.book-auth-page {
    font-size: 0.28rem;
    font-family: $font;
    color: white;
    position: relative;
    margin: 0;
    height: 100vh;
    padding: 0.4rem;
    box-sizing: border-box;
    .modal-bg {
        background: #000;
        opacity: 0.7;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    .modal {
        position: absolute;
        top: 2rem;
        left: 10%;
        z-index: 3;
        background: #FFFFFF;
        border-radius: 5px;
        min-height: 100px;
        width: 80%;
        padding: 0.5rem 0.73rem;
        min-width: 4.5rem;
        box-sizing: border-box;
        @media screen and (max-width:700px) {
            padding: 0.2rem 0.2rem;
        }
        text-align: center;
        .title {
            font-size: 0.44rem;
            font-weight: 200;
            color: $prmary-color;
            letter-spacing: 0;
        }
        .detail {
            color: $black-color;
            letter-spacing: 0;
            line-height: 0.56rem;
            &.line1{
                margin-top:0.3rem;
            }
            &.line2{
                margin-bottom:0.3rem;
            }
        }
        .btn-bar{
            .btn+.btn{
                margin-left: 0.1rem;
            }
            .btn{
                height: 0.64rem;
                font-size: 0.28rem;
                width: 45%;
                padding: 0.12rem auto;
                border-radius: 0.1rem;
                font-weight: 100;
                margin: 0;
                outline: 0;
                &:active {
                    opacity: 0.8;
                }
                &.primary{
                    background: #F5A623;
                    color: #FFF;
                    border: none;
                }
                &.ghost{
                    background: transparent;
                    color: $black-color;
                    border: 1px solid $black-color;
                }
            }
        }
    }
    .content {
        // position: fixed;
        // top: 0.4rem;
        // left: 0.4rem;
        // right: 0.4rem;
        // bottom: 0.4rem;
        height: 100%;
        background: $prmary-color;
        box-shadow: 0 0 0.4rem 0 rgba(2, 127, 89, 0.30);
        border-radius: 0.2rem;
        display: flex;
        flex-direction: column;
        .top-bar {
            flex: 0 0 3rem;
            @media screen and (max-height:1100px) {
                flex: 0 0 2rem;
            }
        }
        .middle-bar {
            flex: 1;
            background: $white-color;
            .book-img {
                @media screen and (max-height:1100px) {
                    width: 2.36rem;
                    height: 3.1rem;
                    margin: -1.54rem auto;                
                }
                width: 2.96rem;
                height: 3.88rem;
                background: $white-color;
                margin: -1.94rem auto;
                box-sizing: border-box;
                padding: 0.1rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .qrcode-img{
                width: 3rem;
                height: 3rem;
                background: $white-color;
                margin: -1.5rem auto;
                border-radius: 0.05rem;
                box-sizing: border-box;
                padding: 0.2rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .qrcode-info{
                margin-top: 1.5rem;
                padding: 0.4rem;
                text-align: center;
                line-height: 0.56rem;
                color: $black-color;
            }
            .book-info {
                padding: 0.21rem 0.45rem 0.45rem 0.45rem;
                margin-top: 1.94rem;
                @media screen and (max-height:1100px) {
                    margin-top: 1.54rem;                                   
                }
                .title {
                    font-size: 0.36rem;
                    color: $black-color;
                    letter-spacing: 0;
                    line-height: 0.56rem;
                    min-height: 0.56rem;
                }
                .info {
                    margin: 0.2rem 0;
                    font-size: 0.28rem;
                    color: $grey-color;
                    letter-spacing: 0;
                    min-height: 0.4rem;
                }
                .tags {
                    min-height: 0.5rem;
                    .tag {
                        border-radius: 0.06rem;
                        font-size: 0.3rem;
                        padding: 0.08rem;
                        letter-spacing: 0;
                        box-sizing: border-box;
                        &.year {
                            background: rgba(245, 166, 35, 0.20);
                            color: #F5A623;
                        }
                        &.grade {
                            color: #5C9CE6;
                            background: rgba(71, 130, 189, 0.2);
                            margin-left: 0.2rem;
                        }
                        &.subject {
                            margin-left: 0.2rem;
                            color: #F87989;
                            background: rgba(248, 121, 137, 0.20);
                        }
                    }
                }
            }
        }
        .bottom-bar {
            display: flex;
            flex-direction: column;
            flex: 1;
            padding: 0.4rem 0.5rem;
            @media screen and (max-height:1100px) {
                padding: 0.2rem 0.3rem;                              
            }
            .text {
                font-weight: 100;
            }
            .btn-warp {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                .btn {
                    font-size: 0.36rem;
                    height: 0.8rem;
                    padding: 0.15rem 0.72rem;
                    background: #F5A623;
                    color: #FFF;
                    border: none;
                    border-radius: 0.08rem;
                    margin: 0;
                    outline: 0;
                    font-weight: 200;
                    &:active {
                        opacity: 0.8;
                    }
                }
            }
            a{
                color: white;
                font-size: 0.28rem;
                &:hover{
                    color: white;
                }
            }
            .input-warp {
                display: flex;
                .code[placeholder] {
                    font-size: 0.28rem;
                }
                .code {
                    height: 0.8rem;
                    border: none;
                    border-radius: 0.08rem;
                    border-top-right-radius: 0;
                    border-bottom-right-radius: 0;
                    padding: 0.08rem 0.14rem;
                    box-sizing: border-box;
                    flex: 1;
                    outline: 0;
                    margin: 0;
                }
                .btn {
                    font-size: 0.36rem;
                    flex: 0 0 1.88rem;
                    @media screen and (max-width:700px) {
                    flex: 0 0 1.38rem;
                    }
                    height: 0.8rem;
                    background: #F5A623;
                    color: #FFF;
                    border: none;
                    border-radius: 0.08rem;
                    border-top-left-radius: 0;
                    border-bottom-left-radius: 0;
                    font-weight: 200;
                    margin: 0;
                    outline: 0;
                    &:active {
                        opacity: 0.8;
                    }
                }
            }
        }
    }
}
@media screen and (min-width:300px) {
  .book-auth-page .content .bottom-bar .input-warp .code {
    width: 2.8rem;
}
}

.occlusion {
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.7);
  position: absolute;
  top: 0;
  left: 0;
  font-family: PingFangSC-Regular;
  display: none;
}
.bomb {
  width: 80%;
  background-color: #fff;
  position: absolute;
  top: 2rem;
  left: 10%;
  color: #000;
  text-align: center;
  border-radius: 5px;
  min-width: 4.5rem;
  padding: 0.5rem 0.73rem;
  box-sizing: border-box;
}
.bomb .text {
  line-height: 100px;
  font-size: 0.38rem;
  color: #00A874;
}
.bomb button {
  display: inline-block;
  height: 0.64rem;
  font-size: 0.28rem;
  width: 2.2rem;
  padding: 0.12rem auto;
  border-radius: 0.1rem;
  font-weight: 100;
  background-color: #F5A623;
  color: #fff;
  outline: 0;
  border: none;
}